import React, { useState, useEffect } from 'react'
import Taro from '@tarojs/taro'
import './index.scss'
import { View } from '@tarojs/components'
import { AtList, AtListItem, AtPagination, AtActivityIndicator } from 'taro-ui'
import { useStore } from '../../../../model/index'
import { getLists, searchLists, getVideoRankLists } from '../../../../api/index'
import VideoCard from '../videoCard/index'

interface VideoListArrResType {
  title: string
  description: string
  pic: string
  name: string
  view: number
  aid: number
  mid: number
  danmaku: number
  like: number
  favourite: number
  reply: number
  tagList: string[]
}

export default () => {
  const [state, actions] = useStore('Index')
  const [total, setTotal] = useState(0)
  const [current, setCurrent] = useState(1)
  const [loading, setloading] = useState(true)
  const [videoList, setVideoList] = useState<VideoListArrResType[]>([])

  useEffect(() => {
    console.log(state.videoSecondType)

    setloading(true)

    // 只要搜索，更改一级标签，二级标签，都会触发list更新
    console.log('触发useEffect')
    ;(async () => {
      let params = {}
      let videoArr = [] as Array<number>

      if (state.keyword) {
        /**
         * @description有搜索有三种情况
         * 第一层级为全部，第二层级只有全部，此时tid和level不传
         * 第一层级为其他，第二层级为全部，tid传第一层级的，level是1
         * 第一层级为其他，第二层级为其他，tid传第二层级，level是2
         */

        if (state.firstBtn === -1) {
          params = {
            page: 1,
            keyword: state.keyword,
            sortType: 0,
            level: 1,
            tid: ''
          }
        } else if (state.firstBtn !== -1 && state.secondBtn === -1) {
          params = {
            page: 1,
            level: 1,
            tid: state.firstBtn,
            keyword: state.keyword,
            sortType: 0
          }
        } else {
          params = {
            page: 1,
            level: 2,
            tid: state.secondBtn,
            keyword: state.keyword,
            sortType: 0
          }
        }
        const {
          data: { data, errorCode, errorMessage }
        } = await searchLists(params)

        // if (data.upList) setvideoList(data.upList)
        setTotal(data.total)
        setloading(false)
      } else {
        /**
         * @description无搜索层级有三种情况
         * 第一层级为全部，第二层级只有全部，此时tid和level不传
         * 第一层级为其他，第二层级为全部，tid传第一层级的，level是1
         * 第一层级为其他，第二层级为其他，tid传第二层级，level是2
         */
        if (state.firstBtn === -1) {
          params = {
            page: 1,
            pageSize: 10,
            videoRankType: 0,
            timeRangeType: 0,
            isIncrease: true,
            typeIdList: []
          }
        } else if (state.firstBtn !== -1 && state.secondBtn === -1) {
          params = {
            page: 1,
            pageSize: 10,
            videoRankType: 0,
            timeRangeType: 0,
            isIncrease: true,
            typeIdList: state.videoSecondType
          }
        } else {
          params = {
            page: 1,
            pageSize: 10,
            videoRankType: 0,
            timeRangeType: 0,
            isIncrease: true,
            typeIdList: videoArr.concat(state.secondBtn)
          }
        }
        const {
          data: { data, errorMessage, errorCode }
        } = await getVideoRankLists(params)

        if (!errorCode) {
          setVideoList(data.videoList)
        } else {
          Taro.atMessage({
            message: errorMessage + '，请充值',
            type: 'error'
          })
        }
        setTotal(data.total)
        setloading(false)
      }
    })()

    setCurrent(1)
  }, [state.firstBtn, state.secondBtn, state.keyword])

  const tapToDetails = (
    id,
    mid,
    pic,
    title,
    desc: string,
    danmaku,
    like,
    reply,
    favourite,
    view,
    tagList
  ) => {
    desc = desc.replace(/\?+/g, '')
    Taro.navigateTo({
      url: `/packageB/video/index?id=${id}&mid=${mid}&pic=${pic}&title=${title}&danmaku=${danmaku}&like=${like}&reply=${reply}&favourite=${favourite}&view=${view}&desc=${desc}&tagList=${tagList}`
    })
  }

  const setLists = () => {
    if (videoList.length !== 0)
      return videoList.map((item) => {
        return (
          <View
            onClick={() =>
              tapToDetails(
                item.aid,
                item.mid,
                item.pic,
                item.title,
                item.description,
                item.danmaku,
                item.like,
                item.reply,
                item.favourite,
                item.view,
                item.tagList
              )
            }
          >
            <VideoCard
              imgUrl={item.pic}
              name={item.name}
              title={item.title}
              description={item.description}
              watchNum={item.view}
            ></VideoCard>
          </View>
        )
      })
  }

  const onPageChange = (data) => {
    let { current } = data
    setloading(true)
    setCurrent(current)
    // console.log(current)
    ;(async () => {
      let params = {}
      let videoArr = [] as Array<number>

      if (state.keyword) {
        /**
         * @description有搜索有三种情况
         * 第一层级为全部，第二层级只有全部，此时tid和level不传
         * 第一层级为其他，第二层级为全部，tid传第一层级的，level是1
         * 第一层级为其他，第二层级为其他，tid传第二层级，level是2
         */

        if (state.firstBtn === -1) {
          params = {
            page: current,
            keyword: state.keyword,
            sortType: 0,
            level: 1,
            tid: ''
          }
        } else if (state.firstBtn !== -1 && state.secondBtn === -1) {
          params = {
            page: current,
            level: 1,
            tid: state.firstBtn,
            keyword: state.keyword,
            sortType: 0
          }
        } else {
          params = {
            page: current,
            level: 2,
            tid: state.secondBtn,
            keyword: state.keyword,
            sortType: 0
          }
        }
        const {
          data: { data, errorCode, errorMessage }
        } = await searchLists(params)

        // if (data.upList) setvideoList(data.upList)
        setTotal(data.total)
        setloading(false)
      } else {
        /**
         * @description无搜索层级有三种情况
         * 第一层级为全部，第二层级只有全部，此时tid和level不传
         * 第一层级为其他，第二层级为全部，tid传第一层级的，level是1
         * 第一层级为其他，第二层级为其他，tid传第二层级，level是2
         */
        if (state.firstBtn === -1) {
          params = {
            page: current,
            pageSize: 10,
            videoRankType: 0,
            timeRangeType: 0,
            isIncrease: true,
            typeIdList: []
          }
        } else if (state.firstBtn !== -1 && state.secondBtn === -1) {
          params = {
            page: current,
            pageSize: 10,
            videoRankType: 0,
            timeRangeType: 0,
            isIncrease: true,
            typeIdList: state.videoSecondType
          }
        } else {
          params = {
            page: current,
            pageSize: 10,
            videoRankType: 0,
            timeRangeType: 0,
            isIncrease: true,
            typeIdList: videoArr.concat(state.secondBtn)
          }
        }
        const {
          data: { data, errorMessage, errorCode }
        } = await getVideoRankLists(params)

        if(!errorCode) {
          setVideoList(data.videoList)
        } else {
          Taro.atMessage({
            type: 'error',
            message: errorMessage + ',请充值'
          })
        }
        setTotal(data.total)
        setloading(false)
      }
    })()
  }

  return (
    <View className="at-list-wrap">
      {loading ? (
        <AtActivityIndicator mode="center"></AtActivityIndicator>
      ) : (
        <View>
          <AtList>{setLists()}</AtList>
          <AtPagination
            icon
            total={total}
            pageSize={10}
            current={current}
            onPageChange={onPageChange}
          ></AtPagination>
        </View>
      )}
    </View>
  )
}
